<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>
</head>
<body>
<div id="app">
    我是一个父组件
    {{name}}
    <heima63></heima63>
    <heima63></heima63>
    <heima63></heima63>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//    要在父实例中使用某个组件，组件必须在实例之前定义
//    组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
//    不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
//组件渲染需要html模板，所以增加了template属性，值就是HTML模板，模版的内容必须由html双标记包裹
//    全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
//data的定义方式比较特殊，必须是一个函数。
    Vue.component("heima63", {
        template: `<div>
            我是一个全局的组件,我的name：{{name}}</br>
            age:{{age}}</br>
            id:{{id}}</br>

            info:{{info}}

            <button @click="add">你点我啊</button>
                    </div>`,
        data() {
            return {
                name: "zxcvb",
                age: 66,
                id: 999,
                info: 0
            }
        },
        methods: {
            add() {
                this.info++
            }
        },
        created() {
            alert("我是")
        }
    });
    let vue = new Vue({
            el: "#app",
            data: {
                name: "heima999"
            }
        })
    ;
</script>
</body>
</html>